<template>
    <div class="area-config">
        <Layout>
            <Header class="header">
                <Row>
                    <Col :span="24">
                        <div>
                            <span class="border-left"></span>
                            区域设置
                        </div>
                    </Col>
                </Row>
            </Header>
            <Content class="content">
                <div class="card-add">
                    <div class="ivu-card ivu-card-bordered ivu-card-dis-hover">
                        <div class="ivu-card-head">
                            <p data-v-57b29fc1="">区域设置</p>
                        </div>
                        <div class="ivu-card-extra">
                            <p class="btn">
                                <i class="ivu-icon ivu-icon-ios-loop-strong"></i>
                                恢复默认设置
                            </p>
                        </div>
                        <div class="ivu-card-body"> 
                            <Row class="level-box">
                                <Col :span="8">省/自治区/直辖市</Col>
                                <Col :span="8">地级市</Col>
                                <Col :span="8">市辖区/县/县级市</Col>
                                <!-- <Col :span="6">乡/镇/街道</Col> -->
                            </Row>
                            <Row class="level-con">
                                <Col :span="8">
                                    <ul class="one-level">
                                        <li 
                                        v-for="item in oneLeve" 
                                        :key="item.lable" 
                                        :class="item.lable === oneSelect ? 'current' : ''"
                                        @click="oneChange(1,item.lable)">{{item.value}}</li>
                                    </ul>
                                </Col>
                                <Col :span="8">
                                    <ul class="one-level">
                                        <li 
                                        v-for="item in twoLeve" 
                                        :key="item.lable" 
                                        :class="item.lable === twoSelect ? 'current' : ''"
                                        @click="oneChange(2,item.lable)">{{item.value}}</li>
                                    </ul>
                                </Col>
                                <Col :span="8">
                                    <ul class="one-level">
                                        <li 
                                        v-for="item in threeLeve" 
                                        :key="item.lable" 
                                        :class="item.lable === threeSelect ? 'current' : ''"
                                        @click="oneChange(3,item.lable)">{{item.value}}</li>
                                    </ul>
                                </Col>
                                <!-- <Col :span="6">
                                    <ul class="one-level not">
                                        <li 
                                        v-for="item in fourLeve" 
                                        :key="item.lable" 
                                        :class="item.lable === fourSelect ? 'current' : ''"
                                        @click="oneChange(4,item.lable)">{{item.value}}</li>
                                    </ul>
                                </Col> -->
                            </Row>
                        </div>
                    </div>
                </div>
            </Content>
            <Footer>
                <p class="copy-right">Copyright © {{host}}, All Rights Reserved.</p>
            </Footer>
        </Layout>
    </div>
    
</template>

<script>
    export default {
        data(){
            return {
                host: window.location.host,
                oneLeve: [
                   {
                       lable: '0',
                       value: '北京'
                   },
                   {
                       lable: '1',
                       value: '天津'
                   },
                   {
                       lable: '2',
                       value: '四川'
                   }
                ],
                oneSelect: '0',
                twoLeve: [
                    {
                       lable: '0',
                       value: '北京'
                    }
                ],
                twoSelect: '0',
                threeLeve: [
                    {
                       lable: '0',
                       value: '昌平区'
                    },
                    {
                       lable: '1',
                       value: '朝阳区'
                    }
                ],
                threeSelect: '0',
                fourLeve: [
                    {
                       lable: '0',
                       value: '百善镇'
                    },
                    {
                       lable: '1',
                       value: '北七家镇'
                    }
                ],
                fourSelect: '0'
            }
        },
        mounted(){
            
        },

        computed: {

        },

        watch: {
            
        },
        
        methods: {
            oneChange(index,select) {
                let data2 = [
                    [{lable: '0',value: '北京'}],
                    [{lable: '0',value: '天津'}],
                    [{lable: '0',value: '成都'}]
                ];
                let data3 = [
                    [{lable: '0',value: '昌平区'},{lable: '1',value: '朝阳区'}],
                    [{lable: '0',value: '宝坻区'},{lable: '1',value: '滨海新区'}],
                    [{lable: '0',value: '成华区'},{lable: '1',value: '都江堰市'}]
                ];
                let data4 = [
                    [
                        [{lable: '0',value: '百善镇'},{lable: '1',value: '北七家镇'}],
                        [{lable: '0',value: '安贞街道'},{lable: '1',value: '八里庄街道'}]
                    ],
                    [
                        [{lable: '0',value: '八门城镇'},{lable: '1',value: '宝平街道'}],
                        [{lable: '0',value: '保税区'},{lable: '1',value: '北塘街道'}]
                    ],
                    [
                        [{lable: '0',value: '白莲池街道'},{lable: '1',value: '保和街道'}],
                        [{lable: '0',value: '安龙镇'},{lable: '1',value: '崇义镇'}]
                    ]
                ];
                if(index === 1){
                    this.oneSelect = select;
                    this.twoLeve = data2[select];
                    this.threeLeve = data3[select];
                    this.fourLeve = data4[select][this.threeSelect];
                }else if(index === 2){
                    this.twoSelect = select;
                }else if(index === 3){
                    this.threeSelect = select;
                    this.fourLeve = data4[this.oneSelect][this.threeSelect];
                }else{
                    this.fourSelect = select;
                }
            }
        }  
    }
</script>


<style lang="less">
    @import '../../assets/styles/constant.less';
    .area-config{
        width: 100%;
        height: 100%;
        overflow-x: hidden;
        overflow-y: auto;
        background-color: #f5f7f9;
        .ivu-layout{
            min-height: 100%;
        }
        .header{
            font-size: 14px;
            line-height: 40px;
            height: 40px !important;
            color: #434343;
            padding: 0 50px;
            background-color: @background;
            border-bottom: 1px solid #ddd;
            .border-left {
                border-left: 5px solid @baseColor;
                margin-right: 4px;
            }
        }
        .content{
            width: 100%;
            min-height: 76%;
            padding: 20px 60px;
            .card-add{
                margin-top: 20px;
                .ivu-card-head{
                    background-color: #f2f2f2;
                }
                .ivu-card-body{
                    padding: 20px 40px;
                    .level-box{
                        text-align: center;
                        background-color: #F9FAFC;
                        padding: 20px 20px;
                        border-bottom: 2px solid #ddd;
                    }
                    .level-con{
                        padding: 20px 20px;
                        text-align: center;
                        .one-level{
                            padding: 0 40px;
                            li{
                                height: 40px;
                                line-height: 40px;
                                cursor: pointer;
                            }
                            li.current{
                                border-top: 1px solid @greenColor;
                                border-bottom: 1px solid @greenColor;
                                background-color: #F9F9F9;
                            }
                        }
                        .one-level:not(.not){
                            border-right: 1px solid #eee;
                        }
                    }
                }
                .ivu-card-extra{
                    top: 10px;
                }
                .btn{
                    width: 100px;
                    height: 30px;
                    line-height: 30px;
                    text-align: center;
                    background-color: #fff;
                    border: 1px solid #ddd;
                    border-radius: 4px;
                    color: #333;
                    cursor: pointer;
                }
            }
        }
        .copy-right{
            text-align: center;
            color: #aaa;
            font-size: 12px;
        }
    }
</style>